import React from 'react'
import { Input, Button, List } from 'antd'
import store from '@/store/index'

// const data = [
//   '早8点开晨会，分配今天的开发工作',
//   '早9点和项目经理作开发需求讨论会',
//   '晚5:30对今日代码进行review'
// ]

class Demo1 extends React.Component {

  constructor(props) {
    super(props)
    this.unsubscribe = store.subscribe(this.storeChange)
  }

  state = Object.assign({
  }, store.getState())

  componentDidMount() {
    const action = {
      type: 'demo1Context',
      value: this
    }
    store.dispatch(action)
  }

  // 生命周期函数-组件销毁时执行
  componentWillUnmount() {
    this.unsubscribe && this.unsubscribe()
  }

  storeChange = () => {
    this.setState(store.getState())
    console.log(111)
  }

  changeInputValue = (e) => {
    const action = {
      type: 'changeInput',
      value: e.target.value
    }
    store.dispatch(action)
  }

  clickBtn = () => {
    const action = { type: 'addItem' }
    store.dispatch(action)
  }

  fn() {
    console.log('demo1 fn')
  }

  // 删除某条数据
  deleteItem = (index) => {
    const action = { type: 'deleteItem', index }
    store.dispatch(action)
  }

  render() {
    let { list, inputValue } = this.state
    return (
      <div className="_demo">
        <Input value={ inputValue } onChange={ this.changeInputValue }></Input>
        <Button onClick={ this.clickBtn }>增加</Button>
        <List
          bordered
          dataSource={ list }
          renderItem={ (item, index) => (
            <List.Item onClick={ () => this.deleteItem(index) }>{ item }</List.Item>
          )}
        /> 
      </div>
    )
  }

}

export default Demo1